<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="formData"
        label-width="100px"
        :disabled="isViewMode"
      >
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="用户名" prop="username" :required="!showButton">
              <el-input v-model="formData.username"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="formData.nickname"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="用户编码" prop="code">
              <el-input v-model="formData.code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="角色" prop="role">
              <el-input v-model="formData.role"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-switch v-model="formData.status"></el-switch>&nbsp;&nbsp;{{this.getStatus}}
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="this.mode=='create'">
            <el-form-item label="初始密码">
              <el-input :value="123456" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="formData.createTime" disabled>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="修改时间" prop="updateTime">
              <el-input v-model="formData.updateTime" disabled>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <span slot="footer" class="dialog-footer" v-show="!isViewMode">
        <el-button type="primary" v-show="!showButton" @click="handleCreate">创 建</el-button>
        <el-button type="primary" v-show="showButton" @click="handleUpdate">更 新</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {upsertList,register} from "@/api/user";
import moment from 'moment';

export default {
  props: {
    visible: Boolean,
    mode: String,
    rowData: Object,
  },
  data() {
    return {
      dialogVisible: this.visible,
      isViewMode: false,
      formData: {
        id:'',
        username:'',
        nickname:'',
        code:'',
        role:'',
        status:false,
        createTime:'',
        updateTime:''
      },
      isRefresh:false
    };
  },
  computed: {
    dialogTitle() {
      const titles = {
        create: "新建数据",
        edit: "编辑数据",
        view: "查看详情",
      };
      return titles[this.mode] || "详情";
    },
    getStatus(){
      return this.formData.status ? '启用':'未启用';
    },
    showButton(){
      console.log('执行计算：'+this.formData.id);
      if(this.formData.id){
        return true;
      }else{
        return false;
      }
    }
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
      this.isRefresh = false;
    },
    mode(newVal) {
      this.isViewMode = newVal === "view";
      if (newVal === "create") {
        // 如果是新建模式，清空表单
        this.formData = {
          id:'',
          username:'',
          nickname:'',
          code:'',
          role:'',
          status:false,
          createTime:'',
          updateTime:''
        };
      }
    },
    rowData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.formData = { ...newVal };
        }
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit("update:visible", false);
      this.$emit("refresh", this.isRefresh);
    },
    handleUpdate() {
      const commitData = { ...this.formData };
      commitData.createTime = null;
      commitData.updateTime = null;
      upsertList([commitData]).then((res)=>{
        if(res.code == 0){
          this.$message.success("更新成功");
          this.isRefresh = true;
          this.formData.updateTime = moment().format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.$message.error("操作失败:"+res.message);
          console.log('操作失败:',res);
        }
      });
    },
    handleCreate(){
      const commitData = { ...this.formData };
      register(commitData).then((res)=>{
        if(res.code == 0){
          this.$message.success("新建成功");
          this.isRefresh = true;
          this.$set(this.formData, 'id', res.data);
          console.log(this.formData.id);
          this.formData.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
          this.formData.updateTime = moment().format('YYYY-MM-DD HH:mm:ss');
        }else{
          this.$message.error("操作失败:"+res.message);
          console.log('操作失败:',res);
        }
      });
    }
  },
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 22px;
}
</style>
